<template>
  <button class="XButton" :class="[type]">
    <slot></slot>
  </button>
</template>

<script>
  export default {
    props: {
      type: {
        type: String,
        default: '',
        validator: (v) => ['', 'primary', 'success', 'warning', 'danger'].indexOf(v) > -1
      }
    }
  }
</script>

<style lang="stylus">
  @import '../styles/variables'
  @import '../styles/mixins'
  .XButton
    padding: 1em
    line-height: 1em
    width: 100%
    border: none
    shadow-style: 4px $shadow true
    outline: none
    cursor: pointer
    border-radius: $radius
    transition: background-color .2s
    button-style: $gray $dark
    &.primary{ button-style: $primary white }
    &.success{ button-style: $success white }
    &.warning{ button-style: $warning white }
    &.danger{ button-style: $danger white }
</style>